<template>
  <view class="login-wrap">
    <view class="login-header" :style="[headerstyle]">
      <view class="dl_img_wrap">
        <image :src="$z.imgsrc('dl_img_logo.png')" class="dl_img_logo"></image>
        <view class="logo-text">欢迎登陆</view>
      </view>
      <view class="login-text-wrap">
        <view class="login-text">你好，欢迎使用</view>
        <view class="login-text">移动端crm管理系统</view>
      </view>
    </view>
    <view class="form-wrap">
      <uni-forms ref="baseForm" :modelValue="data" :rules="rules">
        <uni-forms-item name="username">
          <input
            type="text"
            v-model="data.username"
            placeholder="请输入登录账号"
            maxlength="30"
            style="background: #f3f5f8"
          />
        </uni-forms-item>
        <uni-forms-item name="password">
          <input
            type="password"
            v-model="data.password"
            placeholder="请输入密码"
            maxlength="30"
            style="background: #f3f5f8"
          />
        </uni-forms-item>
        <uni-forms-item>
          <view class="protocol-wrap">
            <uni-data-checkbox
              style="margin-top: 3px; width: auto"
              v-model="agree"
              multiple
              :localdata="[
                {
                  text: '',
                  value: 0,
                },
              ]"
            >
            </uni-data-checkbox>
            我已阅读并同意
            <text class="protocol-text" @tap="toProtocol"
              >《用户服务协议》</text
            >
          </view>
        </uni-forms-item>
        <button @click="login" style="padding: 0">
          <span class="btn-text">登录</span>
        </button>
      </uni-forms>
    </view>
    <verifyslide ref="verifyslide" @success="verifySuccess"></verifyslide>
  </view>
</template>

<script>
import qs from "qs";
import verifyslide from "./components/VerifySlide.vue";
import { setToken, setRefreshToken } from "@/config/storage";
import { weBtoa } from "@/z/function/btoa.js";
export default {
  components: {
    verifyslide,
  },
  data() {
    return {
      agree: [],
      headerstyle: {
        backgroundImage: `url(${uni.$z.imgsrc("zc_img_bj.png")})`,
      },
      loading: false,
      data: {
        username: "",
        password: "",
      },
      rules: {
        username: {
          rules: [
            {
              required: true,
              errorMessage: "请输入登录账号",
            },
          ],
        },
        password: {
          rules: [
            {
              required: true,
              errorMessage: "请输入密码",
            },
          ],
        },
      },
    };
  },
  computed: {
    btndisabled() {
      for (let i in this.data) {
        if (this.data[i] == "") {
          return true;
        }
      }
      return false;
    },
  },
  mounted() {},
  methods: {
    toProtocol() {
      wx.downloadFile({
        // 示例 url，并非真实存在
        url: `${uni.$z.imgsrc("电商平台用户注册及服务协议.docx")}`,
        success: function (res) {
          const filePath = res.tempFilePath;
          wx.openDocument({
            filePath: filePath,
            success: function (res) {
              console.log("打开文档成功");
            },
          });
        },
      });
    },
    verifySuccess(params) {
      let data = {
        code: params.captchaVerification,
        grant_type: "password",
        randomStr: "applet",
        scope: "server",
        ...this.data,
      };
      data.grant_type = "password";
      data.scope = "server";

      const basicAuth = "Basic " + weBtoa("pig:pig");
      console.log(basicAuth, "basicAuth");
      // Session.set('basicAuth', basicAuth);
      // 密码加密
      const encPassword = this.$z.ase2(data.password, "pigxpigxpigxpigx");
      // const encPassword = data.password;
      let { username, randomStr, code, grant_type, scope } = data;
      this.$z
        .request({
          url: `/auth/oauth2/token?${qs.stringify({
            username,
            randomStr,
            code,
            grant_type,
            scope,
          })}`,
          method: "post",
          data: {
            password: encPassword,
          },
          header: {
            skipToken: true,
            Authorization: basicAuth,
            // Authorization: "Basic Y3VzdG9tOmN1c3RvbQ==", // 后台通知小程序更换下登录来源，有问题给罗通连系 0707
            "Content-Type": "application/x-www-form-urlencoded", //自定义请求头信息
          },
        })
        .then((res) => {
          setToken(res["access_token"]);
          setRefreshToken(res["refresh_token"]);
          uni.navigateTo({
            url: "/pages/index/index",
          });
        });
      console.log(
        basicAuth,
        encPassword,
        username,
        randomStr,
        code,
        grant_type,
        scope,
        "params"
      );
    },
    registerfn() {
      uni.navigateTo({
        url: "/pages/login/register/register",
      });
    },
    async login() {
      await this.$refs.baseForm.validate();
      if (this.agree && this.agree.length === 0) {
        return uni.showToast({
          icon: "none",
          title: "请阅读并勾选服务协议",
          duration: 2000,
        });
      }
      this.verifySuccess({})
      // this.$refs.verifyslide.show();
    },
  },
};
</script>

<style lang="scss" scoped>
.login-header {
  height: 575rpx;
  background-color: #dc2626;

  background-size: 100% auto;
  width: 100%;
  padding: 114rpx 54rpx 0;
}

.dl_img_wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.dl_img_logo {
  width: 180rpx;
  height: 70rpx;
  margin-right: 16rpx;
}

.logo-text {
  width: 116rpx;
  height: 36rpx;
  background: #ffffff;
  border-radius: 4rpx;
  font-size: 23rpx;
  color: #dc2626;
  line-height: 36rpx;
  text-align: center;
  align-self: flex-end;
}

.login-text-wrap {
  margin-top: 107rpx;
}

.login-text {
  font-weight: bold;
  font-size: 40rpx;
  color: #ffffff;
  line-height: 60rpx;
}

.form-wrap {
  height: calc(100vh - 575rpx);
  background: #ffffff;
  padding: 90rpx 54rpx 0;
  position: relative;
  top: -15px;
  border-radius: 20px 20px 0 0;
}

.btn-text {
  display: block;
  background: #dc2626;
  color: #ffffff;
  font-weight: 500;
  font-size: 32rpx;
  line-height: 90rpx;
}

.protocol-wrap {
  font-size: 26rpx;
  color: #181a1e;
  line-height: 34rpx;
  display: flex;
  align-items: center;

  .protocol-text {
    color: #3e7afd;
  }
}

::v-deep {
  .checkbox__inner {
    // border: 2px solid #cecece !important;
    // border-radius: 50% !important;
    background: transparent !important;
  }
  .is-checked {
    .checkbox__inner {
      border: 2px solid #dc2626 !important;
      // border-radius: 50% !important;
      background: #dc2626 !important;
      text-align: center;

      .checkbox__inner-icon {
        top: 1px !important;
        left: 3px !important;
        height: 6px !important;
        width: 4px !important;
      }
    }
  }
}
</style>
